<template>
    <div class="master">
        <div class="positionR" :class="{'classify-show':!detailShow}">
            <slide-bottom ref="appraiseBox" @closeSlideBottom="closeSlideBottom"
                          v-if="appraiseShow">
                <div class="width-height-full">
                    <!--详情-->
                    <div class="detail-wrap" v-if="detailShow">
                        <div class="user-info-msg positionR displayFlex flex-algin-center">
                            <img v-if="masterDetailObj.photoUrl" class="user-header" :src="masterDetailObj.photoUrl" alt="">
                            <span class="user-name" v-if="masterDetailObj.name">{{masterDetailObj.name}}</span>
                            <!--客户端没有，后台也没给字段，我先注释-->
                            <span class="detail-icon" v-if="false">
                                <img class="width-full" :src="staticImageUrl('images/master/master_detail_icon.png')" alt="">
                            </span>
                        </div>
                        <scroller>
                            <div class="detail-imgs" :class="{'padding-bottom-75':!(masterWorksObj && Array.isArray(masterWorksObj.list) && masterWorksObj.list.length > 0)}" v-if="Array.isArray(masterDetailObj.detailPhotos) && masterDetailObj.detailPhotos.length > 0">
                                <span class="displayBlock" v-for="(value,key) in masterFooter.detailPhotos" >
                                    <img class="displayBlock detail-img width-full" :class="{'bottom-border-radius':key == masterFooter.detailPhotos.length-1,'top-border-radius':key == 0 }" :src="value.imgUrl" alt="">
                                </span>
                            </div>
                            <!--作品集-->
                            <goods-box v-if="masterWorksObj && Array.isArray(masterWorksObj.list) && masterWorksObj.list.length > 0" :goodsBoxsProp="masterWorksObj"></goods-box>
                        </scroller>
                    </div>
                    <!--分类-->
                    <div class="classify-wrap" v-else>
                        <goods-box v-if="classify && Array.isArray(classify.list) && classify.list.length > 0"
                                   @clickBoxItem="clickBoxItem"
                                   :goodsBoxsProp="classify"></goods-box>
                        <div  v-else class="no-data">
                            <no-data :noDataProps="{text:'没有该分类大师啦`'}"></no-data>
                        </div>
                        <ul class="classiy-list user-touch" v-if="Array.isArray(classifyMenuList) && classifyMenuList.length > 0">
                            <li class="classiy-item" :class="{'active':selectClassIndex == -1}" @click="showMarsterClassify({index:-1,classId:-1,freshMasterList:true})">
                                全部
                            </li>
                            <li class="classiy-item" :class="{'active':selectClassIndex == key}" v-for="(value,key) in classifyMenuList" @click="showMarsterClassify({index:key,classId:value.id,freshMasterList:true})">
                                {{value.className}}
                            </li>
                        </ul>
                        <ul class="classiy-list" v-else>
                            <li class="classiy-item active" @click="showMarsterClassify({index:-1,classId:-1})">
                                全部
                            </li>
                        </ul>
                    </div>
                </div>
            </slide-bottom>
        </div>
    </div>
</template>
<script>
    import {mapMutations,mapState}from 'vuex';
    export default {
        name: "MasterBottom",
        props:{
            masterFooterProp:Object
        },
        data() {
            return {
                appraiseShow: false,//是否显示大师底部模块
                detailShow:false,
                storeId:0,
                menuId:0,
                classify:{},
                selectClassIndex:-1,
                masterFooter:{
                    // id:0,
                    // classId: 0,
                    // className: null,
                    // detailPhotos: [{
                    //     id: 0,
                    //     imgUrl: "https://oss.pg.yibaotong.top/images/promoter/2020032018_dev/C55C2408592DDFD5B8D333BE8DEEB1B5.jpg"
                    // }],
                    // musicId: 0,
                },
                goodsBox:{
                    isNeedScroll: false,//是否需要滚动条
                    list: [/*@list boxitem的列表个数*/
                        // {
                        //     storeId:0,
                        //     id:0,//用于区分多个goodsBox组件
                        //     type:1,//1表示两端布局，价格和卖出商品量,2表示一边是评价一边是日期
                        //     itemId:0,//商品id
                        //     currency:"￥",/*金币的符号*/
                        //     needSmallBall:false,//type 为4 "是否需要小球飞入"
                        //     url:'',/*@url 图片或者视频的url*/
                        //     titleOneLine:false,
                        //     itemTitle:'',/*@description 描述*/
                        //     price:'',/*@description 价格*/
                        //     buyerNum:'',/*@buyerNum 已购买件数*/
                        //     time:0,/*@time时间，当type为2时填写*/
                        //     remark:{text:'NO.1',backgroundColor:''},
                        //     userInfo:{header:'',name:'',like:'',num:'',url:'',selectUrl:'',notSelectUrl:''},
                        // }
                    ],
                }
            }
        },
        mounted() {
            this.masterFooter = Object.assign({},this.masterFooter,this.masterFooterProp)
            this.storeId = this.$route.query.storeId;
            this.menuId = this.$route.query.menuId;
        },
        computed:{
            ...mapState({
                masterDetailObj:state => state.api.master.detailObj,
                marsterClassifyObj:state => state.logic.marsterClassifyObj,
                masterWorksObj:state => state.logic.masterWorksObj,
                classifyMenuList:state => state.api.master.classifyMenuList,
            })
        },
        methods: {
            ...mapMutations(['masterDetail','masterWorks','marsterClassify','masterListApi']),
            closeSlideBottom(){
                setTimeout(()=>{
                    this.appraiseShow =false;
                },300)
            },
            showMarsterDetail(){
                this.detailShow = true;
                let tempObj ={
                    showType:'detail',
                    id:this.masterFooter.id,
                    storeId:this.storeId,
                    menuId:this.menuId,
                    classId:this.masterFooter.classId,
                    userId:this.userId,
                }
                this.masterDetail(tempObj);
                this.masterWorks(tempObj);
                setTimeout(()=>{
                    this.appraiseShow =true;
                    setTimeout(()=>{
                        if(this.$refs.appraiseBox){
                            this.$refs.appraiseBox.showSlideBottom();
                        }
                    },50)
                },10);
            },
            clickBoxItem(obj){
                let that = this;
                if(this.marsterClassifyObj && this.marsterClassifyObj.masterMsg && Array.isArray(this.marsterClassifyObj.masterMsg.list) && this.marsterClassifyObj.masterMsg.list.length > 0) {
                    this.marsterClassifyObj.masterMsg.list.forEach((value, index) => {
                        if(that.classify.list[index]){
                            that.classify.list[index].itemTitle = ''
                        }
                        if(obj.goodsId == value.mediaId){
                            that.$emit('toSwiperIndex',index);
                            that.classify.list[index].itemTitle = '预览中...';
                        }
                    })
                }
            },
            async showMarsterClassify(data){
                this.selectClassIndex = data.index;
                let tempWorksObj ={
                    showType:'classify',
                    id:this.masterFooter.id || -1,
                    storeId:this.storeId || 0,
                    menuId:this.menuId || 0,
                    classId:data.classId ,
                    userId:this.userId || 0,
                }
                /*大师的分类列表*/
                if(data.classifyAjax){
                    let tempClassifyObj = {
                        storeId:this.storeId,
                        menuId:this.menuId,
                    }
                    this.marsterClassify(tempClassifyObj);
                }
                if(data.freshMasterList){
                    let tempMasterListObj = {
                        menuId:this.menuId || 0,
                        storeId:this.storeId || 0,
                        classId:data.classId,
                        userId:this.userId || 0,
                    }
                    await this.masterListApi(tempMasterListObj);
                }
                this.masterWorks(tempWorksObj);
                this.dealMasterList();
                this.detailShow = false;
                setTimeout(()=>{
                    this.appraiseShow =true;
                    setTimeout(()=>{
                        if(this.$refs.appraiseBox){
                            this.$refs.appraiseBox.showSlideBottom();
                        }
                    },50)
                },10)
            },
            dealMasterList(){
                let goodsBox = {
                    isNeedScroll: false,//是否需要滚动条
                }
                let tempList = [];
                if(this.marsterClassifyObj && this.marsterClassifyObj.masterMsg && Array.isArray(this.marsterClassifyObj.masterMsg.list) && this.marsterClassifyObj.masterMsg.list.length > 0){
                    this.marsterClassifyObj.masterMsg.list.forEach((value,index)=>{
                        let temp = {
                            storeId:value.belongStoreInfo && value.belongStoreInfo.storeId ? value.belongStoreInfo.storeId : 0,
                            itemId:value.mediaId,//用于区分多个goodsBox组件
                            type:3,//1表示两端布局，价格和卖出商品量,2表示一边是评价一边是日期
                            needSmallBall:false,//type 为4 "是否需要小球飞入"
                            url:value.poster || value.detailPhotos[0].imgUrl,/*@url 图片或者视频的url*/
                            titleOneLine:true,
                            itemTitle:'',/*@description 描述*/
                            price:'',/*@description 价格*/
                            userInfo:{header:value.belongStoreInfo.logo,name:value.belongStoreInfo.name,like:'',num:'',url:'',selectUrl:'',notSelectUrl:''},
                        }
                        tempList.push(temp);
                    })

                    let tempObj = {
                        list:tempList,
                    }
                    this.classify = Object.assign({},goodsBox,this.classify,tempObj)
                }else{
                    let tempObj = {
                        list:[],
                    }
                    this.classify = Object.assign({},goodsBox,this.classify,tempObj)
                }
            }
        },
        watch:{
            masterFooterProp(val){
                this.masterFooter = Object.assign({},this.masterFooter,val);
            }
        },
        components: {
            'slide-bottom': () => import('../../../../components/commonComponents/slideBottom/SlideBottom'),
            'bottom-floor': () => import('../../../../pages/store/components/BottomFloor'),
            'goods-box': () => import('../../../../components/commonComponents/boxItem/GoodsBox'),
            "no-data":()=>import("../../../../components/commonActModel/noData/NoData"),
        }
    }
</script>
<style scoped lang="scss">
    .master {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 1050;
        padding: .15rem;
    }
    .no-data{
        height: 2.7rem;
    }
    .no-data /deep/{
        .no-wcomment{
            background-color: #fff;
        }
    }
    .master /deep/ {
        .box-item{
            -webkit-touch-callout: inherit;
            -webkit-user-select: auto;
            -webkit-overflow-scrolling : touch;
            padding-bottom: .5rem;
        }

        .buy-user-right{
            font-size: .12rem;
            color: rgba(255,255,255,.6);
        }
        .slide-bottom{
            .com_black{
                z-index:1060;
            }
            .slide-bottom-transition{
                z-index:1061;
            }
        }
    }
    .classify-wrap /deep/{
        .buy-show{
            display: flex;
            flex-flow: nowrap;
            padding: .15rem 0 0 .15rem;
        }
        .buy-item-wrap{
            margin-right: .05rem;
        }
        .box-item{
            padding-bottom: 0;
            display: block;
            height: 2.6rem;
            white-space: nowrap;
            overflow: auto;
            width: 3.6rem;
        }
        .buy-item-content{
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            left: 0;
            height: .2rem;
            right: 0;
            color: rgba(255,255,255,.6);
            text-align: center;
            font-size: .12rem;
        }
    }
    .classify-show /deep/{
        .slide-bottom-transition{
            height: 3.25rem;
        }
    }

    .detail-icon{
        display: inline-block;
        width: .8rem;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin:auto;
    }
    .user-header{
        width: .24rem;
        height: .24rem;
        border-radius: .25rem;
        margin-right: .1rem;
    }
    .user-name{
        font-size: .15rem;
        color: #333333;
    }
    .detail-wrap{
        height: 100%;
        padding: 0 .15rem .15rem;
        background: #fff;
    }
    .detail-wrap /deep/ ._v-container{
        /*padding-top: .5rem;*/
        margin-top: .5rem;
    }
    .detail-imgs{
        padding: .15rem;
        position: relative;
    }
    .bottom-border-radius{
        border-bottom-right-radius: .1rem;
        border-bottom-left-radius: .1rem;
    }
    .top-border-radius{
        border-top-right-radius: .1rem;
        border-top-left-radius: .1rem;
    }
    .user-info-msg{
        position: relative;
        z-index: 1;
        height: .5rem;
        line-height: .5rem;
        background-color: #fff;
    }
    .classiy-list{
        white-space: nowrap;
        height: .35rem;
        line-height: .35rem;
        width: 3.75rem;
        width: 100vw;
        overflow: auto;
    }
    .classiy-item{
        display: inline-block;
        text-align: center;
        font-size: .14rem;
        color: #999999;
        padding: 0 .15rem;
    }
    .classiy-item.active{
        color: #333333;
    }
    .padding-bottom-75{
        padding-bottom: .75rem;
    }

</style>